<template>
  <div class="content">
    <div class="content-right">
      <div style="margin: 10px 0">基本信息</div>
      <el-form
        ref="ruleFormRef"
        :model="submitForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        size="default"
        status-icon
        require-asterisk-position="right"
      >
        <el-form-item label="证件类型" prop="certificatesType">
          <el-select
            v-model="submitForm.certificatesType"
            clearable
            placeholder="请选择证件类型"
          >
            <el-scrollbar>
              <el-option
                v-for="item in idCardList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-scrollbar>
          </el-select>
        </el-form-item>

        <el-form-item label="认证照片" prop="idCardPortrait" class="public">
          <my-photo
            :imgurl="
              submitForm.idCardPortrait
                ? 'http://zxc.ruanjian211.top/' + submitForm.idCardPortrait
                : ''
            "
            @photo-path="idCardPortrait"
          ></my-photo>
          <myPhoto
            :imgurl="
              submitForm.idCardNationalEmblem
                ? 'http://zxc.ruanjian211.top/' +
                  submitForm.idCardNationalEmblem
                : ''
            "
            @photo-path="idCardNationalEmblem"
          ></myPhoto>
        </el-form-item>
        <el-form-item label="证件姓名" prop="idCardName" class="public">
          <el-input
            v-model="submitForm.idCardName"
            placeholder="请输入姓名"
            clearable
            style="width: 500px"
          />
        </el-form-item>
        <el-form-item label="证件号码" prop="idCardNumber" class="public">
          <el-input
            v-model="submitForm.idCardNumber"
            placeholder="请输入证件号码"
            clearable
            style="width: 500px"
          />
        </el-form-item>
        <el-form-item label="有效期" prop="idCardExpirationDate">
          <el-date-picker
            v-model="submitForm.idCardExpirationDate"
            type="date"
            placeholder="请选择日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="认证手机号" prop="linkPhone" class="public">
          <el-input
            v-model="submitForm.linkPhone"
            placeholder="请填写商家使用中的手机号"
            clearable
            style="width: 500px"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="bottom">
    <div class="back" @click="back">
      <span>返回上一步</span>
    </div>
    <div class="next" @click="gonext">
      <span>提交</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

import myPhoto from '@/views/register/components/public/myphoto.vue'
import { merchantInfo } from '@/api/register/types/register'
import useSellerRegisterStore from '@/store/modules/register'
import {
  getShopInfo,
  submitShopInfo,
  getIdCard,
  DictionariesType,
} from '@/api/register/register'
import { queryReq } from '@/utils/http/code'
const router = useRouter()
const { storeId } = toRefs(useSellerRegisterStore())

const back = () => {
  swich.value = true
  useSellerRegisterStore().nextPage('/cvmagic/register/shop', false)
  router.back()
}
// 当前页面被销毁前卸载当前页面的路由
const swich = ref(false)

onBeforeUnmount(() => {
  if (!swich.value) {
    useSellerRegisterStore().nextPage('/cvmagic/register/shop', false)
    console.log('shop页面销毁')
  }
})

const gonext = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      submit(submitForm.value)
      router.push('/cvmagic/shopinfo')
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const submit = async (item: any) => {
  const res = await submitShopInfo(item)
  console.log(res)
}

const idCardList = ref<DictionariesType[]>([] as any)

/**
 * 提交的表单
 */
const submitForm = ref<merchantInfo>({
  storeId: storeId.value,
  certificatesType: 1,
  idCardPortrait: '',
  idCardNationalEmblem: '',
  idCardName: '',
  idCardNumber: '',
  idCardExpirationDate: '',
  linkPhone: '',
  applyId: '',
})

//人面像
const idCardPortrait = (item: string) => {
  submitForm.value.idCardPortrait = item
}
// 国徽面
const idCardNationalEmblem = (item: string) => {
  submitForm.value.idCardNationalEmblem = item
}

const ruleFormRef = ref<FormInstance>()

/**
 * 验证规则
 */
const rules = reactive<FormRules>({
  certificatesType: [
    { required: true, message: '请填写证件类型', trigger: 'blur' },
  ],
  idCardPortrait: [
    {
      required: true,
      message: '证件照片不能为空',
      trigger: 'blur',
    },
  ],
  idCardName: [
    {
      required: true,
      message: '证件姓名不能为空',
      trigger: 'blur',
    },
  ],
  idCardNumber: [
    {
      required: true,
      message: '证件号码不能为空',
      trigger: 'change',
    },
    {
      message: '请输入正确的证件号码',
      pattern:
        /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/,
    },
  ],
  idCardExpirationDate: [
    {
      required: true,
      message: '注册时间不能为空',
    },
  ],
  linkPhone: [
    {
      required: true,
      message: '认证手机号不能为空',
      trigger: 'change',
    },
    {
      message: '请输入正确的手机号',
      pattern: /^1[3-9][0-9]{9}$/,
    },
  ],
})

const initShopInfo = async () => {
  const res = await getShopInfo(storeId.value)
  queryReq(res, (data) => {
    submitForm.value = data
  })
}
const initIdCard = async () => {
  const res = await getIdCard()
  idCardList.value = res.data
}
initShopInfo()
initIdCard()

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now()
}
</script>
<style lang="scss" scoped>
.content {
  margin-top: 30px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  .content-right {
    .right-hint {
      padding: 2px 5px;
      background-color: #fdf6ea;
      font-size: 12px;
      color: #e6a23c;
      margin-bottom: 4px;
    }
    .map {
      .confirm {
        width: 50px;
        height: 20px;
        padding: 2px 0;
        background-color: #f56c6c;
        text-align: center;
        border-radius: 6px;
        line-height: 20px;
        cursor: pointer;
      }
    }
    .public {
      margin-top: 40px;
    }
  }
}
:deep(.anchorBL) {
  display: none !important;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 44px;
  background: #fff;
  box-shadow: 0 -2px 15px 0 rgba(0, 0, 0, 0.05);
  .back {
    width: 76px;
    height: 34px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    margin-right: 10px;
    text-align: center;
    line-height: 34px;
    color: black;
    font-size: 12px;
    cursor: pointer;
  }
  .next {
    width: 76px;
    height: 34px;
    background-color: #1989fa;
    border-radius: 6px;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
  }
}
:deep(.el-upload--picture-card) {
  margin-right: 10px;
}
</style>
